<template>
	<scroll-view scroll-y class="record-users_page scrollbar-none h-full">
		<van-cell is-link @click="datePickerShow = true">{{
			chooseCurrentDate
		}}</van-cell>
		<van-calendar
			class="calendar-box"
			:poppable="false"
			:min-date="minDate"
			:max-date="maxDate"
			:show-title="false"
			:show-subtitle="false"
			:show-confirm="false"
			:formatter="formatterDate"
			@select="calendarSelect"
		/>
		<van-cell title="预约记录">{{ selectDate }}</van-cell>
		<view class="record-users_record">
			<view class="w-full padding-box" v-for="i in timeList">
				<van-tag plain type="primary">{{ i }}</van-tag>
			</view>
		</view>
	</scroll-view>
	<van-popup v-model:show="datePickerShow" round position="bottom">
		<van-date-picker
			v-model="currentDate"
			title="选择年月"
			:columns-type="columnsType"
			@confirm="dateConfirm"
			@cancel="datePickerShow = false"
		/>
	</van-popup>
</template>
<script setup>
import {
	getThisMonthReServationDateApi,
	getRecordSomeDayApi,
	getThisMonthNoReServationDateApi,
} from "@/api";
// 已约满日期
const fullDayList = ref();
// 不可预约
const fdateNotAvailableList = ref();
// 时间段
const timeList = ref([]);
// 日期选择
const currentDate = ref([
	dayjs(new Date()).year(),
	dayjs(new Date()).month() + 1,
]);
// 日历范围
const lastDate = ref(null);
const minDate = ref(null);
const maxDate = ref(null);

// 选中日期
const chooseCurrentDate = ref(dayjs(new Date()).format("YYYY-MM"));
const columnsType = ["year", "month"];
const datePickerShow = ref(false);

const selectDate = ref(dayjs(new Date()).format("YYYY-MM-DD"));

// 预约状态
const showStatusPicker = ref(false);
const onStatusConfirm = ({ selectedOptions }) => {
	showStatusPicker.value = false;
	appointmentStatus.value = selectedOptions[0].text;
};
const appointmentStatus = ref("");
const statusColumns = ref([
	{
		text: "预约中",
		value: "1",
	},
	{
		text: "已预约",
		value: "2",
	},
]);

// 日期选择确认
const dateConfirm = (e) => {
	chooseCurrentDate.value = e.selectedValues[0] + "-" + e.selectedValues[1];
	initDate();
	datePickerShow.value = false;
};
// 日期初始化
const initDate = () => {
	lastDate.value = new Date(
		new Date(currentDate.value[0], currentDate.value[1], 0).getDate(),
	);
	minDate.value = new Date(currentDate.value[0], currentDate.value[1] - 1, 1);
	maxDate.value = new Date(
		currentDate.value[0],
		currentDate.value[1] - 1,
		lastDate.value,
	);
};
// 日期增加描述
const formatterDate = (day) => {
	const year = day.date.getFullYear();
	const month =
		day.date.getMonth() + 1 < 10
			? "0" + (day.date.getMonth() + 1)
			: day.date.getMonth() + 1;
	const date = day.date.getDate();
	const formatDate = year + "-" + month + "-" + date;
	if (
		fdateNotAvailableList.value &&
		fdateNotAvailableList.value.includes(formatDate)
	) {
		day.bottomInfo = "不可预约";
		day.className = "appointments-are-no";
	} else if (fullDayList.value && fullDayList.value.includes(formatDate)) {
		day.bottomInfo = "约满";
		day.className = "appointments-are-full";
	}
	return day;
};
// 日历选择
const calendarSelect = (date) => {
	selectDate.value = dayjs(date).format("YYYY-MM-DD");
	getAppointmentStatus();
};
// 根据当前日期查询预约状态
const getAppointmentStatus = async () => {
	const { data } = await getRecordSomeDayApi({
		day: selectDate.value + " 00:00:00",
	});
	timeList.value = data;
};
onLoad(async () => {
	initDate();
	// 约满
	const { data } = await getThisMonthReServationDateApi();
	fullDayList.value = data;
	// 不可预约
	const { data: dateNotAvailable } = await getThisMonthNoReServationDateApi();
	fdateNotAvailableList.value = dateNotAvailable;
	getAppointmentStatus();
});
</script>
<style lang="scss" scoped>
.record-users_page {
	:deep(.van-calendar) {
		height: auto;
	}
	:deep(.van-calendar__month-title) {
		display: none;
	}
	.padding-box {
		padding: 10rpx var(--van-cell-horizontal-padding);
		box-sizing: border-box;
	}
	.record-users_record {
		background-color: $uni-bg-color;
	}
}
</style>
